<template>
  <div class="box-padding">
    <Row style="height:100%">
      <Col span="4"
           style="border-right:1px solid #D8DDE4FF;height:100%">
      <span style="font-size: 14px">功能模块:</span>
      <ul>
        <li v-for="(item, index) in moduleList"
            :key='index'
            class="for-li"
            @click="getList(item)">{{item}}</li>
      </ul>
      </Col>
      <Col span="20"
           style="height:100%">
      <Table border
             :columns="columns"
             :data="data">
        <template slot-scope="{ row }"
                  slot="todoTimeRule">
          <span v-show="row.todoTimeRule == 'work_before'"
                type="text">开工前{{row.todoTimeValue}}天</span>
          <span v-show="row.todoTimeRule == 'event'"
                type="text">{{row.todoTimeValue}}</span>
        </template>
        <template slot-scope="{ row }"
                  slot="overdueTimeRule">
          <span v-show="row.overdueTimeRule == 'work_before'"
                type="text">开工前{{row.overdueTimeValue}}天</span>
          <span v-show="row.overdueTimeRule == 'after_submit'"
                type="text">提交后{{row.overdueTimeValue}}天</span>
          <span v-show="row.overdueTimeRule == 'after_approval'"
                type="text">审核后{{row.overdueTimeValue}}天</span>
          <span v-show="row.overdueTimeRule == 'after_issue'"
                type="text">签发后{{row.overdueTimeValue}}天</span>
          <span v-show="row.overdueTimeRule == 'after_reject'"
                type="text">驳回后{{row.overdueTimeValue}}天</span>
          <span v-show="row.overdueTimeRule == 'after_begin'"
                type="text">开始后{{row.overdueTimeValue}}天</span>
          <span v-show="row.overdueTimeRule == 'event'"
                type="text">{{row.overdueTimeValue}}</span>
          <span v-show="row.overdueTimeRule == 'week'"
                          type="text">{{row.overdueTimeValue}}</span>
          <span v-show="row.overdueTimeRule == 'risk_level'"
                type="text">I级风险，驳回后{{row.overdueTimeValue.split(",")[0]}}天;
            II级风险，驳回后{{row.overdueTimeValue.split(",")[1]}}天;
            III级风险，驳回后{{row.overdueTimeValue.split(",")[2]}}天;
            IV级风险，驳回后{{row.overdueTimeValue.split(",")[3]}}天</span>
        </template>
      </Table>
      </Col>
    </Row>

  </div>
</template>

<script>
import { getUserInLocalstorage, getButtonInLocalstorage } from '@/libs/util'
export default {
  name: 'early-warning',
  data() {
    return {
      modal2: false,
      columns: [
        {
          title: '序号',
          align: 'center',
          render: (h, params) => {
            return h('span', params.index + 1)
          }
        },
        {
          title: '功能点',
          align: 'center',
          key: 'point'
        },
        {
          title: '待办提醒时间',
          align: 'center',
          slot: 'todoTimeRule',
          tooltip: true
        },
        {
          title: '逾期时间',
          align: 'center',
          slot: 'overdueTimeRule',
          tooltip: true
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              this.control.edit && this.isRootEnterprise
                ? h(
                    'Button',
                    {
                      props: {
                        type: 'text',
                        size: 'small',
                        ghost: true
                      },
                      style: {
                        color: '#2d8cf0',
                        width: '80px'
                      },
                      on: {
                        click: () => {
                          this.edit(params.row)
                        }
                      }
                    },
                    '编辑'
                  )
                : ''
            ])
          }
        }
      ],
      data: [],
      total: 0,
      deleteIndex: '',
      deleteItem: {},
      control: {},
      userInfo: {},
      moduleList: [],
      userInfo: {},
      isRootEnterprise: false, //是否为集团调度岗的人,
      item: {}
    }
  },
  created() {
    this.userInfo = getUserInLocalstorage()
    this.buttonShow()
    this.getModule()
    this.getUser()
  },
  activated() {
    this.getList(this.item)
  },
  methods: {
    getModule() {
      this.$api.earlyWarning.getModule().then(res => {
        if (res.code == 200) {
          this.moduleList = res.data
          this.getList(res.data[0])
        } else {
          this.$Message.warning(res.message)
        }
      })
    },
    // 单项
    getList(item) {
      this.item = item
      this.$api.earlyWarning.getList(item).then(res => {
        if (res.code == 200) {
          this.data = res.data
          res.data.forEach(item => {
            if (item.overdueTimeRule == '') {
            }
          })
        } else {
          this.$Message.warning(res.message)
        }
      })
    },
    edit(item) {
      let route = {
        params: {
          item,
          id: item.id
        },
        name: 'early-warning-edit'
      }
      this.$router.push(route)
    },
    //按钮权限
    buttonShow() {
      let buttonList = JSON.parse(localStorage.getItem('buttonList'))
      buttonList.map(val => {
        let key = Object.keys(val).toString()
        if (key == this.$route.name) {
          Object.values(val)[0].map(item => {
            if (item.code == 'P_0508_01') {
              this.control.edit = true
            }
          })
        }
      })
    },
    getUser() {
      //判断是否为调度员
      this.$api.earlyWarning.getUser().then(resp => {
        if (resp.code == 200) {
          //为200时为调度员
          if (this.userInfo.userInOrgType == 'ROOT_ENTERPRISE_USER') {
            //同时满足为集团级
            this.isRootEnterprise = true
          }
        }
      })
    }
  }
}
</script>

<style scope>
.box-padding {
  height: 100%;
  padding: 5px;
}
.for-li {
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  color: #6b7c9aff;
  cursor: pointer;
  list-style: none;
}
</style>
